<template>
    <div class="jindu-main">
        <GisplusTitle></GisplusTitle>
        <div class="jindu-title">投资产值分析</div>
        <div class="jindu-box-min">
            <div class="renyuan-box">
                <p style="color: #fff;text-align: left">单位：万元</p>
                <echarts id="echarts1" :option="view1_1_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <p style="color: #fff;text-align: left">单位：万元</p>
                <echarts id="echarts2" :option="view1_2_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <p style="color: #fff;text-align: left">单位：万元</p>
                <echarts id="echarts3" :option="view1_3_data" :styles="styles"></echarts>
            </div>
        </div>
        <div class="jindu-title">工程量统计</div>
        <div class="jindu-box-min">
            <div class="renyuan-box">
                <echarts id="echarts4" :option="view2_1_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts5" :option="view2_2_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts6" :option="view2_3_data" :styles="styles"></echarts>
            </div>
        </div>
        <div class="jindu-box-min">
            <div class="renyuan-box">
                <echarts id="echarts7" :option="view2_4_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts8" :option="view2_5_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts9" :option="view2_6_data" :styles="styles"></echarts>
            </div>
        </div>
        <div class="jindu-title">控制性工程</div>
        <div class="jindu-box-min">
            <div class="renyuan-box">
                <echarts id="echarts10" :option="view3_1_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts11" :option="view3_2_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts12" :option="view3_3_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts13" :option="view3_4_data" :styles="styles"></echarts>
            </div>
            <div class="renyuan-box">
                <echarts id="echarts14" :option="view3_5_data" :styles="styles"></echarts>
            </div>
            <div class="empty">
                <echarts id="echarts14" :option="view3_5_data" :styles="styles"></echarts>
            </div>
        </div>
    </div>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue'
  import GisplusTitle from '@/components/gisplus/GisplusTitle.vue'

  var lightBlue = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0,
      color: 'rgba(41, 121, 255, 1)' // 0% 处的颜色
    }, {
      offset: 1,
      color: 'rgba(0, 192, 255, 1)' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
  }
  // 纹理
  var piePane = ''
  var piePatternImg = new Image()
  piePatternImg.src = piePane
  export default {
    name: 'JinDu',
    data () {
      return {
        view1_1: {
          finshed: [],
          name: [],
          sum: []
        },
        view1_2: {
          fwjsbaz: [],
          jagc: [],
          lhgc: [],
          ljgc: [],
          lmgc: [],
          lsgc: [],
          month: [],
          qlgc: [],
          sdgc: [],
          sjf: []
        },
        view1_3: {
          jhwc: [],
          month: [],
          sjwc: []
        },
        view2_1: {
          list: [],
          complete: [],
          total_design: []
        },
        view2_2: {
          list: [],
          complete: [],
          total_design: []
        },
        view2_3: {
          list: [],
          complete: [],
          total_design: []
        },
        view2_4: {
          list: [],
          complete: [],
          total_design: []
        },
        view2_5: {
          list: [],
          complete: [],
          total_design: []
        },
        view2_6: {
          list: [],
          complete: [],
          total_design: []
        },
        view3_1: {
          list: [],
          complete: [],
          total_design: []
        },
        view3_2: {
          list: [],
          complete: [],
          total_design: []
        },
        view3_3: {
          list: [],
          complete: [],
          total_design: []
        },
        view3_4: {
          list: [],
          complete: [],
          total_design: []
        },
        view3_5: {
          list: [],
          complete: [],
          total_design: []
        },
        styles: {
          width: '5rem',
          height: '3rem',
          margin: '0 auto'
        }
      }
    },
    computed: {
      //1-1
      view1_1_data () {
        return {
          tooltip: {
            trigger: 'item',
            showDelay: 0,
            formatter: function (params) {
              if (params.seriesIndex == 0) {
                return '已完成:' + params.value
              } else if (params.seriesIndex == 2) {
                return '总数量:' + params.value
              }
            },
          },
          grid: {
            top: '5%',
            left: '10%',
            right: '5%',
            bottom: '20%',
          },
          xAxis: {
            data: this.view1_1.name,
            offset: 0,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              rotate: 30,
              color: '#ffffff',
              fontSize: 12
            }
          },
          yAxis: {
            min: 0,
            // max: 100,
            splitLine: {
              // show: false
            },
            axisTick: {
              // show: false
            },
            axisLabel: {
              // show: false
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            }
          },
          series: [{
            type: 'bar',
            // label: {
            //   show: true,
            //   position: 'top',
            //   padding: 10,
            //   color: '#2979ff',
            //   fontSize: 14,
            //   formatter: '{c}'
            // },
            itemStyle: {
              color: lightBlue
            },
            barWidth: '40%',
            data: this.view1_1.finshed,
            z: 10
          },
            {
              type: 'bar',
              barGap: '-100%',
              itemStyle: {
                color: {
                  image: piePatternImg,
                  repeat: 'repeat'
                },
                opacity: 0.05
              },
              barWidth: '40%',
              data: this.view1_1.sum,
              z: 5
            },
            {
              type: 'bar',
              barGap: '-100%',
              itemStyle: {
                color: '#feb3c8',
                opacity: 1
              },
              barWidth: '40%',
              data: this.view1_1.sum,
              z: 5
            }]
        }
      },
      //1-2
      view1_2_data () {
        return {
          // title: {
          //   text: '堆叠区域图'
          // },
          color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7292', '#e7bcf3', '#8378ea', '#00ea06'],
          tooltip: {
            trigger: 'axis',
            textStyle: {
              align: 'left'
            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              }
            }
          },
          legend: {
            data: ['临时工程', '路基工程', '路面工程', '桥梁工程', '隧道工程', '交安工程', '绿化工程', '房屋及设备安装', '设计费'],
            textStyle: {
              color: '#ffffff'
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.view1_2.month,
              axisLine: {
                lineStyle: {
                  color: '#ffffff'
                }
              },
              axisLabel: {
                rotate: 30,
                color: '#ffffff',
                fontSize: 12
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#ffffff'
                }
              }
            }
          ],
          series: [
            {
              name: '临时工程',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {},
              data: this.view1_2.lsgc
            },
            {
              name: '路基工程',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {},
              data: this.view1_2.ljgc
            },
            {
              name: '路面工程',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {},
              data: this.view1_2.lmgc
            },
            {
              name: '桥梁工程',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {normal: {}},
              data: this.view1_2.qlgc
            },
            {
              name: '隧道工程',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {normal: {}},
              data: this.view1_2.sdgc
            },
            {
              name: '交安工程',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {normal: {}},
              data: this.view1_2.jagc
            },
            {
              name: '绿化工程',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {normal: {}},
              data: this.view1_2.lhgc
            },
            {
              name: '房屋及设备安装',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {normal: {}},
              data: this.view1_2.fwjsbaz
            },
            {
              name: '设计费',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {normal: {}},
              data: this.view1_2.sjf
            }
          ]
        }
      },
      //1-3
      view1_3_data () {
        return {
          color: ['#ffdb5c', '#32c5e9'],
          tooltip: {
            trigger: 'axis',
            textStyle: {
              align: 'left'
            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              }
            }
          },
          legend: {
            top: '10%',
            data: ['计划进度', '实际进度'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top: 80,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.view1_3.month,
              axisLine: {
                lineStyle: {
                  color: '#ffffff'
                }
              },
              axisLabel: {
                rotate: 30,
                color: '#ffffff',
                fontSize: 12
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          series: [
            {
              name: '计划进度',
              type: 'line',
              data: this.view1_3.jhwc
            },
            {
              name: '实际进度',
              type: 'line',
              data: this.view1_3.sjwc
            }
          ]
        }
      },
      //2-1
      view2_1_data () {
        return {
          title: {
            text: '路基工程',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            offset: 5,
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 20,
              fontSize: 12,
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view2_1.list,

          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view2_1.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view2_1.complete
            }
          ]
        }
      },
      //2-2
      view2_2_data () {
        return {
          title: {
            text: '桥梁工程',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view2_2.list
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view2_2.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view2_2.complete
            }
          ]
        }
      },
      //2-3
      view2_3_data () {
        return {
          title: {
            text: '隧道工程',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view2_3.list
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view2_3.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view2_3.complete
            }
          ]
        }
      },
      //2-4
      view2_4_data () {
        return {
          title: {
            text: '路面工程',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view2_4.list
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view2_4.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view2_4.complete
            }
          ]
        }
      },
      //2-5
      view2_5_data () {
        return {
          title: {
            text: '交安工程',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          grid: {
            left: '12%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view2_5.list
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view2_5.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view2_5.complete
            }
          ]
        }
      },
      //2-6
      view2_6_data () {
        return {
          title: {
            text: '机电工程',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view2_6.list
          },
          yAxis: {
            minInterval: 1,
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view2_6.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view2_6.complete
            }
          ]
        }
      },
      //3-1
      view3_1_data () {
        return {
          title: {
            text: '新安一号桥',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view3_1.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_1.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_1.complete
            }
          ]
        }
      },
      //3-2
      view3_2_data () {
        return {
          title: {
            text: '牙柄二号侨',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view3_2.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_2.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_2.complete
            }
          ]
        }
      },
      //3-3
      view3_3_data () {
        return {
          title: {
            text: '白石山隧道',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view3_3.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_3.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_3.complete
            }
          ]
        }
      },
      //3-4
      view3_4_data () {
        return {
          title: {
            text: '新安隧道',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view3_4.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_4.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_4.complete
            }
          ]
        }
      },
      //3-5
      view3_5_data () {
        return {
          title: {
            text: '牙柄隧道',
            textStyle: {
              color: '#fff'
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12
            },
            textStyle: {
              color: '#ffffff'
            },
            data: this.view3_5.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_5.total_design
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_5.complete
            }
          ]
        }
      },
    },
    components: {
      echarts, GisplusTitle
    },
    methods: {
      //获取产值进度统计数据
      getCzjd () {
        const that = this
        return that.request.getCzjd().then(function (response) {
            console.log(response.content)
            let data = response.content
            that.view1_1 = data.gclx
            that.view1_2 = data.type_month
            that.view1_3 = data.status_month
          })
          .catch(function (error) {
            that.fetchError = error
          })
      },
      getDataEngine () {
        const that = this
        return that.request.getDataEngine().then(function (response) {
            console.log(response.data)
            let res = response.data
            that.view2_1 = res.road
            that.view2_2 = res.bridge
            that.view2_3 = res.tunnel
            that.view2_4 = res.pavement
            that.view2_5 = res.traffic
            that.view2_6 = res.electromechanical
          })
          .catch(function (error) {
            that.fetchError = error
          })
      },

      getDataControl () {
        const that = this
        return that.request.getDataControl().then(function (response) {
            console.log(response.data)
            let res = response.data
            that.view3_1 = res.bridge_1st
            that.view3_2 = res.bridge_2nd
            that.view3_3 = res.bsh_tunnel
            that.view3_4 = res.xa_tunnel
            that.view3_5 = res.yb_tunnel
          })
          .catch(function (error) {
            that.fetchError = error
          })
      },
    },
    mounted () {
      this.getCzjd()
      this.getDataEngine()
      this.getDataControl()
    }
  }
</script>


<style>

</style>
